<template>
  <el-card>
    <div slot="header">
      <h3>调价通知单</h3>
    </div>
    <div class="card_body_wrap">
      <el-row :gutter="20" class="item_wrap">
        <el-col :span="6">
          <span>日期：</span>
          <span>{{ infoData.createOpeTime }}</span>
        </el-col>
        <el-col :span="6">
          <span>部门：</span>
          <span>{{ infoData.changeDepartName }}</span>
        </el-col>
        <el-col :span="6">
          <span>提交人：</span>
          <span>{{ infoData.createOperName }}</span>
        </el-col>
        <el-col :span="6">
          <span>发起区域：</span>
          <span>{{ infoData.createAreaName }}</span>
        </el-col>
      </el-row>
      <el-row type="flex" class="item_wrap">
        <el-col :span="6">
          <span>主单据号：</span>
          <span>{{ infoData.recodeMainNo }}</span>
        </el-col>
        <el-col :span="6">
          <span>供应商管理区域：</span>
          <span>{{ infoData.storeManagerAreaName }}</span>
        </el-col>
        <el-col :span="12">
          <span>供应商：</span>
          <span>{{ infoData.storeName }}</span>
        </el-col>
      </el-row>
      <el-row
        type="flex"
        align="middle"
        class="item_wrap"
        v-if="queryData.pageType === 'deal'"
      >
        <div>预计调价时间：</div>
        <div>
          <el-date-picker
            v-model="willChangeTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>
      </el-row>
      <el-row type="flex" justify="end" class="item_wrap">
        <el-button type="primary" @click="handleOpenDialog">调价单</el-button>
        <el-button
          v-if="queryData.pageType === 'deal'"
          type="primary"
          @click="handleDelayAdjustPrice"
          >延期调价</el-button
        >
        <el-button
          v-if="queryData.pageType === 'deal'"
          type="primary"
          @click="handleDealAdjustmentNotice"
          >处理</el-button
        >
        <el-button
          v-if="queryData.pageType === 'audit'"
          type="primary"
          @click="handleAuditAdjustmentNotice"
          >审核</el-button
        >
        <el-button @click="$router.push({ name: 'modifyManageList' })"
          >返回</el-button
        >
      </el-row>
      <el-row class="format_table_wrap">
        <general-table
          :loading="loading.table"
          :data-source="tableData"
          :columns="tableColumns"
          :tableHeight="0"
          :isShowTooltip="false"
        />
      </el-row>
      <el-row class="item_wrap">
        <el-card shadow="hover">
          <el-row>
            <el-col :span="6">
              <span>单据号：</span>
              <span>{{ footerFields.recordNo }}</span>
            </el-col>
            <el-col :span="6">
              <span>提交时间：</span>
              <span>{{ footerFields.createOpeTime }}</span>
            </el-col>
            <el-col :span="6">
              <span>提交部门：</span>
              <span>{{ footerFields.departName }}</span>
            </el-col>
            <el-col :span="6">
              <span>区域：</span>
              <span>{{ footerFields.createAreaName }}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
    </div>
    <adjust-price-dialog
      :visible.sync="adjustPriceVisible"
      :recordNo="footerFields.recordNo"
    />
  </el-card>
</template>
<script>
import { ApiRequest } from '@/api/basePage';
import GeneralTable from '@/pages/commodity/modules/components/generalTable';
import AdjustPriceDialog from './components/AdjustPriceDialog';
import { getLoadingFn } from '@/utils/loading';
export default {
  components: {
    GeneralTable,
    AdjustPriceDialog
  },
  data () {
    return {
      infoData: {
        createOpeTime: '', // 日期
        changeDepartName: '', // 部门
        createOperName: '', // 提交人
        createAreaName: '', // 发起区域
        recodeMainNo: '', // 主单据号
        storeName: '', // 供应商
        storeManagerAreaName: '' // 供应商管理区域
      },
      willChangeTime: '', // 预计调价时间
      queryData: {
        recordNo: '',
        pageType: ''
      },
      footerFields: {},
      loading: {
        table: false
      },
      tableData: [],
      tableColumns: [
        {
          title: '调价通知单据号',
          key: 'recodeNo',
          fixed: 'left',
          width: 200
        },
        {
          title: '商品名称',
          key: 'productName',
          align: 'center'
        },
        {
          title: 'SPU编码',
          key: 'spuNo',
          align: 'center'
        },
        {
          title: 'SKU编码',
          key: 'skuNo',
          align: 'center'
        },
        {
          title: '规格',
          key: 'spec',
          align: 'center'
        },
        {
          title: '商品管理区域',
          key: 'productManagerArea',
          align: 'center'
        },
        {
          title: '计量单位',
          key: 'productUnit',
          align: 'center'
        },
        {
          title: '供货单位',
          key: 'storeUnit'
        },
        {
          title: '原辅进价',
          key: 'oldUnitPrice'
        },
        {
          title: '现辅进价',
          key: 'newUnitPrice'
        },
        {
          title: '浮动比例',
          key: 'changeRatio'
        },
        {
          title: '发起原因',
          key: 'reason',
          align: 'center'
        },
        {
          title: '落实原因',
          key: 'auditReason',
          align: 'center',
          type: 'input',
          disabled: this.$route.query.type === 'view' || false
        },
        {
          title: '调价单号',
          key: 'changeNo',
          align: 'center',
          width: 200
        },
        {
          title: '状态',
          key: 'stateStr',
          align: 'center'
        }
      ],
      adjustPriceVisible: false
    };
  },
  created () {
    this.queryData = {
      recordNo: this.$route.query.recodeNo,
      pageType: this.$route.query.type
    };
    this.getInitTableData();
  },
  methods: {
    getInitTableData () {
      this.loading.table = true;
      ApiRequest(
        `/sysback/salepricechangeorder/getInfoByRecordNo?recordNo=${this.queryData.recordNo}`,
        'get',
        false
      )
        .then((res) => {
          this.loading.table = false;
          if (res.retStatus !== '1') {
            return false;
          }
          let {
            createOpeTime,
            changeDepartName,
            createOperName,
            createAreaName,
            recodeMainNo,
            storeName,
            storeManagerAreaName,
            willChangeTime,
            recodeNo,
            departName
          } = res.retData[0];
          this.footerFields = {
            recordNo: recodeNo,
            createOpeTime,
            departName,
            createAreaName
          };
          this.infoData = {
            createOpeTime,
            changeDepartName,
            createOperName,
            createAreaName,
            recodeMainNo,
            storeName,
            storeManagerAreaName
          };
          this.willChangeTime = willChangeTime;
          this.tableData = res.retData;
        })
        .catch(() => {
          this.loading.table = false;
        });
    },
    handleOpenDialog () {
      this.adjustPriceVisible = true;
    },
    /* 延期调价按钮事件 */
    handleDelayAdjustPrice () {
      if (!this.willChangeTime) {
        return this.$message.warning('请先设置预计调价时间');
      }
      if (Number(new Date(this.willChangeTime) < Number(new Date()))) {
        return this.$message.warning('预计调价时间不能小于当前时间');
      }
      let data = {
        recordNo: this.footerFields.recordNo,
        willChangeTime: this.willChangeTime
      };
      let loadingInstance = getLoadingFn('card_body_wrap');
      ApiRequest(
        '/sysback/salepricechangeorder/updateOrderWillChangeTime',
        'post',
        data
      )
        .then((res) => {
          loadingInstance.close();
          if (res.retStatus !== '1') {
            return false;
          }
          this.$message.success('延期调价成功');
          this.$router.push({ name: 'modifyManageList' });
        })
        .catch(() => {
          loadingInstance.close();
        });
    },
    /* 处理按钮事件 */
    handleDealAdjustmentNotice () {
      let data = this.tableData.map((item) => ({
        auditReason: item.auditReason,
        uuid: item.uuid
      }));
      let flag = this.tableData.every((item) => {
        return item.auditReason;
      });
      if (!flag) {
        this.$message.warning('有单据号落实原因未填写');
        return false;
      }
      this.$confirm('你确认要处理完毕吗？', {
        title: '调价通知单处理',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          let loadingInstance = getLoadingFn('card_body_wrap');
          ApiRequest(
            `/sysback/salepricechangeorder/receive?recordNo=${this.footerFields.recordNo}`,
            'post',
            data
          )
            .then((res) => {
              loadingInstance.close();
              if (res.retStatus !== '1') {
                return false;
              }
              this.$message.success('处理成功');
              this.$router.push({ name: 'modifyManageList' });
            })
            .catch(() => {
              loadingInstance.close();
            });
        })
        .catch(() => {});
    },
    /* 审核按钮事件 */
    handleAuditAdjustmentNotice () {
      this.$confirm('你确认要审核完毕吗？', {
        title: '调价通知单审核',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          let loadingInstance = getLoadingFn('card_body_wrap');
          ApiRequest(
            `/sysback/salepricechangeorder/audit?recordNo=${this.footerFields.recordNo}`,
            'post'
          )
            .then((res) => {
              loadingInstance.close();
              if (res.retStatus !== '1') {
                return false;
              }
              this.$message.success('审核成功');
              this.$router.push({ name: 'modifyManageList' });
            })
            .catch(() => {
              loadingInstance.close();
            });
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="less" scoped>
.item_wrap {
  margin: 10px 0px;
}
</style>
